//   3、放大图也要按照左边比例来移动


function Enlarge(containerEle){
    // 传入最大的节点 里面的小节点 就可以通过containerEle来获取
    this.containerEle = containerEle;
    // show 的区域 ,也就是 中间大小图的区域
    this.showEle = this.containerEle.querySelector(".show");
    // 遮罩层区域
    this.maskEle = this.containerEle.querySelector(".mask");
    // 大图区域
    this.enlargeEle = this.containerEle.querySelector(".enlarge");
    this.showOrHidden();  //一旦在外部调用new实例化了那么就自动调用showOrHidden方法
    this.maskMove();
}
//显示隐藏
Enlarge.prototype.showOrHidden = function(){
    // 鼠标移入的时候显示，遮罩层 和 大图区域
    // this 在构造函数或者原型方法里 都指向 实例化对象
    // this在事件触发的函数里会指向事件源
    // 2种方式 1.通过that=this  2. 通过箭头语法
    this.showEle.onmouseenter = ()=>{
        this.maskEle.style.display = "block";
        this.enlargeEle.style.display = "block";
    }
    // 鼠标移除的时候隐藏
    this.showEle.onmouseleave = ()=>{
        this.maskEle.style.display = "none";
        this.enlargeEle.style.display = "none";
    }
}

// 2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
Enlarge.prototype.maskMove = function(){
    this.showEle.onmousemove = e=>{
        let ev = e || window.event;
        let x = ev.clientX;  //相对于浏览器距离
        let y = ev.clientY;
        // console.log(x,y)
        // 需要把遮罩层的位置改成鼠标移动的位置
        this.maskEle.style.left = x - this.containerEle.offsetLeft - this.maskEle.offsetWidth/2 + "px";
        this.maskEle.style.top = y - this.containerEle.offsetTop - this.maskEle.offsetHeight/2 + "px";
        this.enlargePicMove(parseInt( this.maskEle.style.left),parseInt(this.maskEle.style.top));
       
        // 遮罩层的移动不能跑中图区域外边
        // 左边边界
        if(parseInt( this.maskEle.style.left)<0){
            this.maskEle.style.left = 0;
        }
        // 上边边界
        if(parseInt(this.maskEle.style.top)<0){
            this.maskEle.style.top = 0;
        }
        // 右边边界 
        if( parseInt( this.maskEle.style.left)> (this.showEle.offsetWidth-this.maskEle.offsetWidth)){
            this.maskEle.style.left = (this.showEle.offsetWidth-this.maskEle.offsetWidth) + "px";
        }
        // 下面边界
        if(parseInt(this.maskEle.style.top)>(this.showEle.offsetHeight-this.maskEle.offsetHeight)){
            this.maskEle.style.top =  (this.showEle.offsetHeight-this.maskEle.offsetHeight) + "px";
        }
   
    }
}

// 3、放大图也要按照左边比例来移动
Enlarge.prototype.enlargePicMove = function(middleLeft,middleTop){
    // 大图应该移动多少？？
    /* 
        // x轴
        遮罩层x轴的位置/中图的总宽度  = ？/ 大图的总的宽度
    
    */
        let middlePicWidth = this.showEle.offsetWidth;
        let middlePicHeight = this.showEle.offsetHeight;
        let bigPicSize = getComputedStyle(this.enlargeEle)['background-size'];
        console.log(bigPicSize);
        let bigPicWidth =  parseInt( bigPicSize.split(" ")[0]);
        let bigPicHeight = parseInt(bigPicSize.split(" ")[1]);
        // middleLeft/middlePicWidth = ?/ 大图的总的宽度
        let bigLeft = (middleLeft/middlePicWidth)*bigPicWidth;
        let bigTop  = (middleTop/middlePicHeight)*bigPicHeight;
        this.enlargeEle.style.backgroundPosition = `-${bigLeft}px -${bigTop}px`;
}


